<script setup lang="ts">
import type { DepartmentClassRespVO } from '@/api/department-class';
import { computed, ref } from 'vue';
import { DepartmentClassApi } from '@/api/department-class';
import { useRequest } from '@/hooks/useRequest';
import { buildAssetSource } from '@/utils';
import { withQueryString } from '@/utils/router.utils';
import SubSectionList from './subSectionList.vue';

const props = defineProps<{
  searchValue?: string
}>();

const {
  data: sectionList,
  runAsync: getSectionList
} = useRequest(
  () => DepartmentClassApi.getFirstLevelDepartmentList({
    name: props.searchValue
  }),
  {
    onBeforeRequest() {
      uni.showLoading({
        title: '加载中...',
        mask: true
      });
    },
    onComplete() {
      uni.hideLoading();
    }
  }
);

const selectedSection = ref<DepartmentClassRespVO>();

const subSectionListRef = ref<InstanceType<typeof SubSectionList>>();

function onSelectSection(item: DepartmentClassRespVO) {
  selectedSection.value = item;
  subSectionListRef.value?.onOpenSubSectionList(item);
}

function onSubSectionListClose() {
  selectedSection.value = undefined;
}

function onSubSectionListNext(subSection: DepartmentClassRespVO) {
  uni.navigateTo({
    url: withQueryString('/pages/appointmentRegistration/doctorList', {
      sectionId: subSection.id
    })
  });
}

const buildSectionCover = computed(() => {
  return (item: DepartmentClassRespVO) => {
    return item.imageUrl || buildAssetSource('section.png');
  };
});

function onImageError(item: DepartmentClassRespVO) {
  item.imageUrl = buildAssetSource('section.png');
}

defineExpose({
  dispatchSearch() {
    getSectionList();
  }
});
</script>

<template>
  <view class="section-list">
    <wd-row :gutter="20">
      <wd-col v-for="item in sectionList" :key="item.id" :span="8">
        <view
          class="section-item"
          :class="{ active: item.id === selectedSection?.id }"
          @click="onSelectSection(item)"
        >
          <view class="section-item__cover">
            <image :src="buildSectionCover(item)" @error="onImageError(item)" />
          </view>
          <view class="section-item__title">
            {{ item.name }}
          </view>
          <view class="section-item__desc">
            {{ item.introduce }}
          </view>
        </view>
      </wd-col>
    </wd-row>

    <SubSectionList ref="subSectionListRef" @close="onSubSectionListClose" @next="onSubSectionListNext" />
  </view>
</template>

<style lang="scss" scoped>
.section-list {
  padding: 48px 28px;
  padding-top: 0;
  .section-item {
    @apply flex-center flex-col;
    height: 271px;
    border-radius: 20px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(247, 250, 254, 0.5);
    margin-top: 20px;
    .section-item__cover {
      @apply flex-center;
      background: #f3f7ff;
      width: 92px;
      height: 92px;
      border-radius: 50%;
      image {
        width: 60px;
        height: 60px;
      }
    }

    .section-item__title {
      font-size: 36px;
      font-weight: bold;

      color: var(--text-color);
      margin-top: 24px;
      margin-bottom: 20px;
    }

    .section-item__desc {
      font-size: 18px;
      color: var(--secondary-text-color);
    }

    &.active {
      background: var(--primary);
      .section-item__cover {
        background: #2d85f6;
      }

      .section-item__title {
        color: #fff;
      }

      .section-item__desc {
        color: #ffffff;
      }
    }
  }
}
</style>
